<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>抽奖</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/lottery.css"/>
	<script type="text/javascript" src="__STATIC__/js/lottery.js"></script>
</head>

<style>

	#mask{
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 1111;
		background: rgba(0,0,0,0.9);
	}

	#mask .con{
		position: fixed;
		height: 3rem;
		width: 6.6rem;
		font-size: .36rem;
		background-color: #FFF;
		border-radius: .08rem;
		top: calc( 50vh - 1.5rem );
		left: calc( 50vw - 3.3rem );
		color: #1a1a1a;
		text-align: center;
		background-image: url();
		background-size: contain;
	}

</style>

<body style="max-height: calc(100vh);overflow: hidden;">

	<!-- mask -->
	<div id="mask">
	<!-- <div id="mask" style="display:none"> -->
		<div class="con">
			<!-- 敬请期待 -->
		</div>
	</div>

    <div class="shanDeng" id="deng">
        <div id="luck">
            <!-- luck -->
            <table >
                <tbody class="mainBody">
                    <tr>
                        <td class="luck-unit luck-unit-0 prize_{$prize_list[0]['prize_id']}" data-index="0">
							<img src="{$prize_list[0]['prize_img']}">
							<p>{$prize_list[0]['prize_name']}</p>
						</td>
                        <td class="luck-unit luck-unit-1 prize_{$prize_list[1]['prize_id']}" data-index="1">
							<img src="{$prize_list[1]['prize_img']}">
							<p>{$prize_list[1]['prize_name']}</p>
						</td>
						<td class="luck-unit luck-unit-2 prize_{$prize_list[2]['prize_id']}" data-index="2">
							<img src="{$prize_list[2]['prize_img']}">
							<p>{$prize_list[2]['prize_name']}</p>
						</td>
                    </tr>
                    <tr>
                        <td class="luck-unit luck-unit-7 prize_{$prize_list[3]['prize_id']}" data-index="7">
							<img src="{$prize_list[3]['prize_img']}">
							<p>{$prize_list[3]['prize_name']}</p>
						</td>
                        <td class="cjBtn" id="btn"></td>
                        <td class="luck-unit luck-unit-3 prize_{$prize_list[4]['prize_id']}" data-index="3">
							<img src="{$prize_list[4]['prize_img']}">
							<p>{$prize_list[4]['prize_name']}</p>
						</td>
                    </tr>
                    <tr>
                        <td class="luck-unit luck-unit-6 prize_{$prize_list[5]['prize_id']}" data-index="6">
							<img src="{$prize_list[5]['prize_img']}">
							<p>{$prize_list[5]['prize_name']}</p>
						</td>
						<td class="luck-unit luck-unit-5 prize_{$prize_list[6]['prize_id']}" data-index="5">
							<img src="{$prize_list[6]['prize_img']}">
							<p>{$prize_list[6]['prize_name']}</p>
						</td>
						<td class="luck-unit luck-unit-4 prize_{$prize_list[7]['prize_id']}" data-index="4">
							<img src="{$prize_list[7]['prize_img']}">
							<p>{$prize_list[7]['prize_name']}</p>
						</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- luckEnd -->
		
		<div id="luck_times">
			今日还可以抽<label id="luck_remain_times">{$lottery_times['total']-$lottery_times['used']}</label>次，已抽取<label id="luck_used">{$lottery_times['used']}</label>次
		</div>
		
    </div>
	
    <div class="play">
        <div class="title">
			近期获奖用户
		</div>
        <div class="div">
            <div id="demo" class="qimo8">
                <div class="qimo">
                    <div id="demo1">
                        <ul>
                        	<volist name="lottery_users" id="vo">
                            <li>
								<span>恭喜{$vo.info.nickname}</span>
								<span>{$vo.info.mobile}</span>
								<span>获得<label>{$vo.prize_name}</label></span>
							</li>
                           </volist>
                        </ul>
                    </div>
                    <div id="demo2">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
	
	<div class="rule">
		<p class="title">活动规则</p>
		<div>
			<p>1. 每天可以抽{$lotteryNum}次奖。</p>
			<p>2. 每次抽奖需要扣除{$lotteryConsume}{:C('POINT_NAME')}。</p>
			<p>3. 如果{:C('POINT_NAME')}不足请通过邀请用户或者观看广告答题等形式获取。</p>
		</div>
	</div>
	
	<div class="touch_btn">
		<a href="{:U('lottery/lottery_record')}">抽奖记录</a>
	</div>
	
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script>
		
	var config = {
		total_times: {$lottery_times['total']},// 总抽奖次数,
		remind_times: {$lottery_times['total']-$lottery_times['used']} // 总剩余次数
	}

	// unprpzie
	var units = $(".luck-unit.prize_0");

	// 结果
	var result = {
		is_luck: false,
		dom: units[parseInt(Math.random() * units.length)]
	};
		
    var luck = {
        index: 0, //当前转动到哪个位置，起点位置
        count: 0, //总共有多少个位置
        timer: 0, //setTimeout的ID，用clearTimeout清除
        speed: 20, //初始转动速度
        times: 0, //转动次数
        cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1, //中奖位置
        endCb: undefined,
        init: function(id) {
        	this.endCb = undefined;
            if ($("#" + id).find(".luck-unit").length > 0) {
                $luck = $("#" + id);
                $units = $luck.find(".luck-unit");
                this.obj = $luck;
                this.count = $units.length;
                $luck.find(".luck-unit-" + this.index).addClass("active");
            };
        },


        roll: function() {
            var index = this.index;
            var count = this.count;
            var luck = this.obj;
            $(luck).find(".luck-unit-" + index).removeClass("active");
            index += 1;
            if (index > count - 1) {
                index = 0;
            };
            $(luck).find(".luck-unit-" + index).addClass("active");
            this.index = index;
            return false;
        },
        stop: function(index) {
            this.prize = index > this.count - 1 ? this.count - 1 : index;
			// roll();
            return false;
        },
		end:function()
		{
			clearTimeout(luck.timer);
			luck.prize = -1;
			luck.times = 0;
			click = false;
			console.log("抽奖结束",luck);
			config.remind_times--;
			chkLuckTimes();
			if( this.endCb && this.endCb instanceof Function )
			{
				this.endCb();
			}
		}
    };
	
	//抽奖次数检验 
	function chkLuckTimes()
	{
		document.getElementById("luck_remain_times").innerText = config.remind_times;
		document.getElementById("luck_used").innerText = config.total_times - config.remind_times;
		
		if( config.remind_times < 1 )
			return false;
		
		
		return true;
	}
	
	chkLuckTimes();

    function roll() {
        luck.times += 1;
        luck.roll();
        if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
           luck.end();
        } else {
            if (luck.times < luck.cycle) {
                luck.speed -= 10;
            } else if (luck.times == luck.cycle) {
                var index = Math.random() * (luck.count) | 0;
                if (index > 7 ) {
                    index = 7;
                }else{
					index = 5;
				}
                // luck.prize = index; //最终中奖位置
            } else {
                if (luck.times > luck.cycle + 10 && ((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) {
                    luck.speed += 110;
                } else {
                    luck.speed += 20;
                }
            }
            if (luck.speed < 40) {
                luck.speed = 40;
            };

            luck.timer = setTimeout(roll, luck.speed);
        }
        return false;
    }

	// 开始抽奖 
    var click = false;
    window.onload = function() {
        luck.init('luck');
        $("#btn").click(function() {
            if (click) {
                return false;
            } else {

				if(!chkLuckTimes())
				{
					return new toast({
						icon: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535785122&di=7fe9d4866cdd4a268affe8b2d899faf6&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F50%2F28%2F59e69215261b5_610.jpg",
						title: "您的兑换券不足",
						content: "请去看广告赚钱、分享平台或者店铺赚取兑换券"
					})
				}

				$.ajax({
		    		url: "{:U('lottery/lotteryDraw')}",
		    		// type: "post",
		    		dataType:"json",
		    		success: function(res)
		    		{
		    			result.is_luck = false;

		    			if( res.status !== "success" )
		    			{
		    				if( res.msg != "unPrize" )
		    				{
								return new toast({
			    					title: res.msg,
			    					content: ""
			    				})
		    				}
		    				
							result.dom = $(units[parseInt(Math.random() * units.length)]);

							luck.endCb = function(){
								new toast({
			    					title: "再接再厉",
			    					content: ""
			    				})
							}
		    			}else{
		    				result.dom = ".luck-unit.prize_"+res.data.prize_id;
		    				luck.endCb = function(){
								new toast({
			    					title: "恭喜抽中",
			    					content: res.data.prize_name
			    				})
							}
		    			}

		    			luck.speed = 100;
		    			luck.stop($(result.dom).data('index'));
		    			roll();
		                click = true;
		    			
		    		}
		    	})

                
                return false;
            }
			
        });
    };
    //播报
    var demo = document.getElementById("demo");
    var demo1 = document.getElementById("demo1");
    var demo2 = document.getElementById("demo2");
    demo2.innerHTML = document.getElementById("demo1").innerHTML;
	demo1.marginTop = 0;	
	demo2.marginTop = 0;
    function Marquee() {
		var h = demo1.offsetHeight;
		if( -demo1.marginTop >= h )
		{
			demo1.marginTop = demo1.offsetHeight; 
			var t = demo1;
			demo1 = demo2;
			demo2 = t;
		}
		demo1.marginTop--;		
		demo2.marginTop = h + demo1.marginTop - 15;
		
		demo1.style.marginTop = demo1.marginTop+"px";
		demo2.style.marginTop = demo2.marginTop+"px"
    }
    setInterval(Marquee, 20);

    // 抽奖
    </script>
</body>

</html>